import AppHeader from '@components/AppHeader'
import AppMenu from '@components/AppMenu'
import { createFileRoute, Outlet } from '@tanstack/react-router'
import { Layout } from 'antd'
import { useState } from 'react'
const { Content } = Layout

const layoutStyle = {
  borderRadius: 8,
  overflow: 'hidden',
  width: '100vw',
  // maxWidth: '100%',
  height: '100vh',
}

export const Route = createFileRoute('/_layout')({
  component: RouteComponent,
})

function RouteComponent() {
  console.log('--- Layout ---')
  const [collapsed, setCollapsed] = useState(false)
  const toggleCollapsed = () => setCollapsed(!collapsed)
  return (
    <Layout style={layoutStyle}>
      <AppMenu collapsed={collapsed} />

      <Layout>
        <AppHeader toggleCollapsed={toggleCollapsed} collapsed={collapsed} />

        <Content className="scroll-auto overflow-auto">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}
